<!-- 退货 -->
<template>
  <div class="main-content-container setUp">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="12" class="searchInput">
          <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable class="input-with-select" @change="searchBtn">
            <!-- <el-button @click="searchBtn">搜索</el-button> -->
            <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
          </el-input>
        </el-col>
      </el-row>
      <el-row class="margin-top">
        <Search :data="selections" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
      </el-row>
      <el-row class="margin-top">
        <TypeSelection :data="datas" :default-value="1" :on-change="datasChange" class="TypeSelection" />
      </el-row>
    </div>
    <!-- 列表区域 -->
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table :data="outboundList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="退料单号" prop="dataCode" show-overflow-tooltip />
        <el-table-column label="顾客" prop="customerName" show-overflow-tooltip />
        <el-table-column label="订单号" prop="orderCode" show-overflow-tooltip />
        <el-table-column label="退单时间" prop="handDate" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.handDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退单人" prop="handler" show-overflow-tooltip />
        <el-table-column label="状态" prop="status" show-overflow-tooltip />
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==='待退货'" type="text" @click="outboundBtn(scope.row)">退货</el-button>
            <el-button v-if="scope.row.status==='已退货'" type="text" @click="detailsBtn(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <!-- 退货 -->
    <Dialog class="two-columns" :title="returnTitle" :visible.sync="returnVisible" :loading="returnLoading" @confirm="submitForm" @close="handleClose">
      <!-- <div class="headStyle">
        <span>顾客：{{ outbound.customerName }}</span>
        <span>退货单号：{{ outbound.dataCode }}</span>
      </div> -->
      <el-row style="margin-bottom: 18px">
        <el-col :span="12">顾客：{{ outbound.customerName }}</el-col>
        <el-col :span="12">退货单号：{{ outbound.dataCode }}</el-col>
      </el-row>
      <el-table :data="outboundTable" border :row-class-name="tableColor">
        <el-table-column label="药品名称" prop="name" show-overflow-tooltip />
        <el-table-column label="规格" prop="spec" show-overflow-tooltip />
        <el-table-column label="单位" prop="unit" show-overflow-tooltip />
        <el-table-column label="退单数量" prop="returnCount" show-overflow-tooltip width="100px" />
        <el-table-column label="退还仓库" prop="warehouseName" show-overflow-tooltip />
        <el-table-column label="退还批次" prop="inventoryBatch" show-overflow-tooltip />
        <el-table-column label="出库数量" prop="deliveryCount" />
        <el-table-column label="退货数量" width="142">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.purchaseCount" controls-position="right" :min="0" :max="scope.row.deliveryCount-0" />
          </template>
        </el-table-column>
      </el-table>
    </Dialog>
    <!-- 详情 -->
    <Dialog class="two-columns" :title="detailTitle" :visible.sync="detailVisible" :reveal="false" :loading="detailLoading" @close="detailHandleClose">
      <el-row>
        <el-col :span="12">顾客：{{ haveOutbound.customerName }}</el-col>
        <el-col :span="12">退货单号：{{ haveOutbound.dataCode }}</el-col>
      </el-row>
      <el-table v-loading="loading" :data="haveOutboundTable" border :row-class-name="tableColor">
        <el-table-column label="药品名称" prop="name" show-overflow-tooltip />
        <el-table-column label="规格" prop="spec" show-overflow-tooltip />
        <el-table-column label="单位" prop="unit" show-overflow-tooltip />
        <el-table-column label="退单数量" prop="returnCount" show-overflow-tooltip width="100px" />
        <el-table-column label="退还仓库" prop="warehouseName" show-overflow-tooltip />
        <el-table-column label="退还批次" prop="inventoryBatch" show-overflow-tooltip />
        <el-table-column label="出库数量" prop="deliveryCount" show-overflow-tooltip />
        <el-table-column label="退货数量" prop="purchaseCount" show-overflow-tooltip />
      </el-table>
    </Dialog>
  </div>
</template>
<script>
import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { selections } from "@/config";
import { tableColor, labelHeigh } from '@/utils/common.js';
import Dialog from "@/components/Dialog/index";
export default {
  components: {
    Search,
    Dialog,
    TypeSelection,
  },
  props: {
    activates: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selections,
      tableColor,
      innerHeight: null,
      searchForm: {},
      options: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      outboundList: [],
      requestInfo: {
        handType: '退货',
        status: '待退货',
      },
      datas: [
        { id: 0, name: '全部' },
        { id: 1, name: '待退货' },
        // { id: 2, name: '待退款' },
        { id: 2, name: '已退货' },
        { id: 3, name: '已取消' },
        // { id: 4, name: '已退款' },
      ],
      custQuery: '',
      outbound: {},
      outboundTable: [],
      batchOutbound: {},
      batchOutboundTable: [],
      haveOutboundTable: [],
      haveOutbound: {},
      returnTitle: "",
      returnVisible: false,
      returnBtn: "",
      loading: false,
      returnLoading: false,
      boundTitle: "",
      boundVisible: false,
      boundTestBtn: "",
      boundLoading: false,
      detailTitle: "",
      detailVisible: false,
      detailLoading: false,
      flag: false,
      num: 0, // 批量出库数量
      handleNumArr: [],
    };
  },
  mounted() {
    this.getOutboundList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    // 待出库列表
    async getOutboundList() {
      this.loading = true;
      if (this.requestInfo.status === "全部") this.requestInfo.status = undefined;
      const res = await this.$api['warehouse/salesReturn/salesReturnList']({ ...this.params, query: this.requestInfo });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询待出库列表失败！');
      this.outboundList = res.data.result;
      this.total = res.data.total;
    },
    datasChange(item) {
      this.params.page = 1;
      this.$set(this.requestInfo, 'status', item.name);
      this.getOutboundList();
    },
    searchBtn() {
      const val = this.query.name;
      if (!val) return false;
      const json = {};
      if (val.length < 10) {
        json.customerName = val;
      } else if (val.length === 11) {
        const res = /^1\d{10}$/;
        if (res.test(val)) {
          json.customerPhone = val;
        } else {
          this.$message.error("请输入正确得手机号码");
        }
      } else {
        json.customerCode = val;
      }
      Object.assign(this.query, json);
      this.params.page = 1;
      this.getOutboundList();
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getOutboundList();
    },
    // 出库
    async outboundBtn(row) {
      this.outbound = row;
      this.returnTitle = "退货";
      this.returnVisible = true;
      this.returnLoading = true;
      const res = await this.$api['warehouse/salesReturn/salesReturnDetailList']({ query: { dataCode: row.dataCode }});
      if (res.code === 200) {
        this.outboundTable = res.data;
      }
      this.returnLoading = false;
    },
    handleChange(val) {
      this.handleNumArr = val;
      this.num = 0;
      for (let i = 0; i < val.length; i++) {
        this.num += val[i].receiveCount;
      }
    },
    // 提交
    async submitForm() {
      this.returnLoading = true;
      const res = await this.$api['warehouse/salesReturn/salesReturn']({ ...this.outbound, purchaseOrderDtoList: this.outboundTable });
      if (res.code !== 200) return this.$message.error('退货失败！');
      this.$message.success('退货成功！');
      this.getOutboundList();
      this.returnVisible = false;
      this.returnLoading = false;
    },
    // 确认批次
    boundSubmitForm() {
      this.boundVisible = false;
      this.outboundTable.map(item => {
        if (this.batchOutbound.id === item.id) {
          item.receiveCount = this.num;
          item.list = this.handleNumArr;
        }
      });
    },
    handleClose() {
      this.returnVisible = false;
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.requestInfo.createdTime = val.createdTime;
      this.getOutboundList();
    },
    handleTypeChange(val) {
      this.requestInfo.createdTime = val.createdTime;
      this.getOutboundList();
    },
    // 详情
    async detailsBtn(row) {
      this.haveOutbound = row;
      this.detailTitle = "药品出库详情";
      this.detailVisible = true;
      const res = await this.$api['warehouse/salesReturn/salesReturnDetailList']({ query: { dataCode: row.dataCode }});
      if (res.code !== 200) return this.$message.error('查询详情列表失败！');
      if (res.code === 200) {
        this.haveOutboundTable = res.data;
      }
    },
    detailHandleClose() {
      this.detailVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
  .margin-top{
    margin-top: 12px;
  }
  /deep/ .el-col{
    line-height: 30px;
  }
</style>
